<html>
<head>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script src="figue.js" type="text/javascript"></script>
 <script src="util.js" type="text/javascript"></script>
 <script src="clustermap.js" type="text/javascript"></script>

  <script>
  function initialize() {
    // initialize the main map
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var elements = [ {'label': 'Point 1', 'coordinates': {'lat': 10, 'lng': 2}, 'color': 'blue'},
                     {'label': 'Point 2', 'coordinates': {'lat': 9, 'lng': 4}, 'color': 'red'},
                     {'label': 'Point 3', 'coordinates': {'lat': 11, 'lng': 6}, 'color': 'yellow'}]

    map.setCenter(new google.maps.LatLng(10, 4)) ;
    map.setZoom(7) ;
    google.maps.event.addListener(map, 'bounds_changed', function() {
      new clustermap.HCMap ({'map': map , 'elements': elements}) ;
    });
  };
  </script>
  <style type="text/css">
.baseMarker {
  border:1px solid black;
  position: absolute;
  text-align:center;
  margin: 0px;
  padding: 0px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-color: "fdj";
  z-index: 1;
}
  </style>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:500px;height:500px"></div>
</body>
</html>
